<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>新闻统计页面</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">

                <div class="layui-col-sm12 layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">新闻数量统计</div>
                        <div class="layui-card-body" style="min-height: 280px;">
                            <div id="main1" class="layui-col-sm12" style="height: 300px;"></div>

                        </div>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">最新一周PV/UV量</div>
                        <div class="layui-card-body" style="min-height: 280px;">
                            <div id="main2" class="layui-col-sm12" style="height: 300px;"></div>

                        </div>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">用户来源</div>
                        <div class="layui-card-body" style="min-height: 280px;">
                            <div id="main3" class="layui-col-sm12" style="height: 300px;"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">最新一周新增用户</div>
                        <div class="layui-card-body" style="min-height: 280px;">
                            <div id="main4" class="layui-col-sm12" style="height: 300px;"></div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>

        <script src="/lib/echarts.js"></script>
        <script type="text/javascript">
            layui.use(['jquery','layer'],function () {
                     $ = layui.jquery;
               var layer = layui.layer;
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main4'));

                // 指定图表的配置项和数据
                var option = {
                    grid: {
                        top: '5%',
                        right: '1%',
                        left: '1%',
                        bottom: '10%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['周一','周二','周三','周四','周五','周六','周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name:'用户量',
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true
                    }]
                };


                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main2'));

                // 指定图表的配置项和数据
                var option = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    grid: {
                        top: '5%',
                        right: '2%',
                        left: '1%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : ['周一','周二','周三','周四','周五','周六','周日']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'PV',
                            type:'line',
                            areaStyle: {normal: {}},
                            data:[120, 132, 101, 134, 90, 230, 210],
                            smooth: true
                        },
                        {
                            name:'UV',
                            type:'line',
                            areaStyle: {normal: {}},
                            data:[45, 182, 191, 234, 290, 330, 310],
                            smooth: true,

                        }
                    ]
                };


                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);


                // 基于准备好的dom，初始化echarts实例
                var myChart3 = echarts.init(document.getElementById('main3'));

                // 指定图表的配置项和数据
                var option3 = {
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:335, name:'直接访问'},
                                {value:310, name:'邮件营销'},
                                {value:234, name:'联盟广告'},
                                {value:135, name:'视频广告'},
                                {value:1548, name:'搜索引擎'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart3.setOption(option3);

                var process = function(data){

                    var type = new Array();
                    var typeNumber = new Array();

                    $.each(data,function (index,value){
                        type.push(value.newsType)
                        typeNumber.push(value.typeNumber);
                    });


                    // 基于准备好的dom，初始化echarts实例
                    var myChart4 = echarts.init(document.getElementById('main1'));

                    // 指定图表的配置项和数据
                    var option4 = {
                        title: {
                            text: '全部新闻条数统计（按类型）'
                        },
                        tooltip: {},
                        legend: {
                            data:['数量']
                        },
                        xAxis: {
                            data: type
                        },
                        yAxis: {},
                        series: [{
                            name: '数量',
                            type: 'bar',
                            data: typeNumber
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart4.setOption(option4);

                };

                //获取新闻统计数据

                $.ajax({
                    url:'/news/getCountInfo',
                    type:'POST', //GET
                    async:true,    //或false,是否异步
                    timeout:5000,    //超时时间
                    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    contentType: "application/json",
                    success:function(data){
                        if (data.code == '0'){
                            process(data.data);

                        }else {
                            layer.msg("数据获取失败！",{icon:2});
                        }
                    }
                });
            });
    </script>
    </body>
</html>